<template>
  <div>
    <div class="back-btn" @click="backTo">
      <img src="../../assets/images/back.png" alt="">
      <div id="nav-head-left-btn" onclick="backTo()">{{courseName}}</div>
    </div>

    <div class="head-title-of" >
      <div class="bar">学生作业</div>
    </div>

    <div class="no-name hide new-page gWidth" style="display: block;">

        <div class="head-title">
            <div class="homework-title">
                <div>{{work.assignmentName}}</div>
              <div class="togsh">
                <div class="fl">截至&nbsp;&nbsp;{{work.assignmentEnd}}</div>
                <div class="span">{{students.length}}学生</div>
              </div>

            </div>

        </div>
        <div id="gList">
            <div class="sortTable">
                <el-table
                    :data="students"
                    style="width: 100%">
                    <el-table-column prop="stuId" label="学号" width="180" align="center" />
                    <el-table-column prop="name" label="姓名" width="180" align="center" />
                    <el-table-column label="成绩" align="center" width="120px">
                        <template slot-scope="scope">
                            <div class="input-box">
                                <div v-if="!scope.row.isCheck && scope.row.isHandin">
                                  <input @blur="correct(scope.row.sid, scope.row.score,scope.row.isCheck)" v-model="scope.row.score" type="text" />
                                    <span style="color: red; font-size: 18px">/未批</span>
                                </div>
                                <div v-else-if="scope.row.isCheck && scope.row.isHandin">
                                    <input @blur="correct(scope.row.sid, scope.row.score,scope.row.isCheck)" v-model="scope.row.score" type="text" />
                                    <span>/{{scope.row.fullScore}}</span>
                                </div>
                              <div v-else>
                                <span>未提交,无法批阅</span>
                              </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="提交状态" align="center">
                        <template slot-scope="scope">
                            <div class="input-box">
                                <div v-if="!scope.row.isHandin">
                                    <span style="font-size: 18px;color: red">未提交</span>
                                </div>
                                <div v-else>
                                    <span>已提交</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <div class="input-box">
                                <div v-if="!scope.row.isHandin">
                                    <span style="font-size: 18px">--</span>
                                </div>
                                <div v-else>
                                    <span @click="intoCorrect(scope.row.url)">下载作业批改</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { selectAssignmentDetail, getAssignmentByAid, editScore } from './../../api/require'
export default {
  data () {
    return {
      wId: '',
      fullScore: '',
      work: {},
      students: [],
      courseName: '',
      aid: ''
    }
  },
  methods: {
    intoCorrect (workUrl) {
      console.log(workUrl)
      window.open(workUrl)
    },
    correct (sid, score, isCheck) {
      if (!this.isRealNum(score)) {
        this.$message.warning('输入不合法，请输入一个[分数]')
      } else if (score > this.work.fullScore || score < 0) {
        this.$message.warning('请输入不少于0或不大于' + this.work.fullScore + '的值！')
      } else {
        console.log(sid)
        editScore(sid, this.aid, score, isCheck).then(res => {
          if (res.data.code === 200) {
            this.$message.success(res.data.message)
          } else {
            this.$message.error(res.data.message)
          }
          this.getAssDetail()
        }).catch(err => {
          console.log(err)
          this.$message.error('修改失败')
        })
      }
    },
    isRealNum (val) {
      if (val === '' || val == null) {
        return false
      }
      if (!isNaN(val)) {
        return true
      } else {
        return false
      }
    },
    backTo () {
      this.$router.push({ path: '/teacher/course', query: { cid: this.cid, tid: this.tid } })
    },
    getFileName (workUrl) {
      const pos = workUrl.lastIndexOf('/')
      return workUrl.substring(pos + 1)
    },
    getAssDetail () {
      selectAssignmentDetail(this.aid).then(res => {
        console.log('作业详情', res)
        this.students = res.data.obj
        for (let i = 0; i < this.students.length; i++) {
          if (this.students[i].url) {
            this.students[i].url = 'http://localhost:9000/' + this.getFileName(this.students[i].url)
          }
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    console.log('路由', this.$route)
    this.tid = sessionStorage.getItem('tid')
    this.aid = this.$route.query.aid
    this.cid = this.$route.query.cid
    this.courseName = this.$route.query.courseName

    this.getAssDetail()

    getAssignmentByAid(this.aid).then(res => {
      console.log('作业题目', res)
      this.work = res.data.obj
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style scoped lang="scss">
  .back-btn{
    display: flex;
    justify-content: left;
    align-items: center;
   position: absolute;
    left: 0;
    img{
      width: 50px;
      height:50px ;
    }
  }
  #nav-head-left-btn{
    /*display: inline-block;*/
    height: 30px;
    padding: 2px 10px;
    background-color: rgb(44,88,171);
    color: #ffffff;
    text-align: center;
    border-radius: 16px;
    line-height: 28px;
    cursor: pointer;
    float: left;
  }
  .head-title-of{
    width: 100%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #409eff;
    .bar{
      width: 200px;
      height: 100%;
      font-size: 30px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .bar{
    height: 30px;
  }
    li {
        list-style: none;
    }
    .fl {
        float: left;
    }
    .new-page {
        background: #FFF;
        border: 1px solid #c8c8c8;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 1020px;
    }
    .gWidth {
        width: 980px;
    }
    .cWidth, .cWidth-new, .gWidth {
        margin-left: auto;
        margin-right: auto;
    }
    .head-title {
        padding: 10px;
        height: 100px;
        position: relative;
        border-bottom: 1px solid #c8c8c8;
      background: #409eff;
    }
    .homework-title {
      font-size: 30px;
      div{
        margin-bottom: 20px;
      }

    }

  .head-title .togsh{
    display: flex;
    justify-content: left;
   align-items: center;
    div {
      font-size: 15px;
      padding: 5px 20px;
      margin-right: 10px;
      background: yellowgreen;
      border-radius: 3px;
      color: #fff;
    }
    .span{
      font-size: 13px;
      padding: 2px 6px;
      background: purple;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }

    .input-box {
        box-sizing: border-box;
    }
    .input-box span {
        height: 38px;
        line-height: 38px;
        display: inline-block;
        vertical-align: middle;
    }
    .input-box input {
        display: inline-block;
        vertical-align: middle;
        height: 38px;
        width: 50px;
        font-size: 16px;
        outline: 0;
        border: none;
        border-bottom: 1px solid #000;
        background: 0 0;
        cursor: text;
        text-align: center;
    }
</style>
